<template>
  <q-dialog v-model="visible" v-if="order.type === 'transport-catch'&&order.receiver!==null">
    <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
      <q-card-section class="row items-center q-gutter-x-sm">
        <div class="text-h6">订单详细</div>
      </q-card-section>
      <q-card-section class="q-pa-sm">
        <q-list bordered separator >
            <q-item clickable v-ripple >
              <q-item-section>目的地</q-item-section>
              <q-item-section side>{{order.receiver.poseName}}</q-item-section>
            </q-item>
              <q-item  clickable v-ripple>
            <q-item-section>货物规格</q-item-section>
            <q-item-section side>{{order.receiver.specs}}</q-item-section>
             </q-item>
          <q-item  clickable v-ripple>
            <q-item-section>数量</q-item-section>
            <q-item-section side>{{order.receiver.count}}</q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'OrderMessage',
  setup () {
    const visible = ref(false)
    const order = ref({})
    function show (data) {
      visible.value = true
      order.value = data
    }
    return {
      visible,
      show,
      order
    }
  }
}
</script>

<style scoped>

</style>
